<template>
  <div class="share_content">
    <!-- 分享弹窗 -->
    <nut-overlay v-model:visible="isShow" @click="isShow = false">
      <div class="share_main">
        <ImgT src="/imgs/me/share_top.webp" :key="'share_top'" class="top_img" alt="" />
        <div class="share_img">
          <div class="qr_code_wrap">
            <vue-qr id="qrid" backgroundColor="#515089" :text="props.url" :size="200" logoSrc="/imgs/me/logo.webp"
              class="qr_code"></vue-qr>
          </div>
          <div class="share_bottom">
            <nut-button class="save" @click="toSave">{{ t('save_image') }}</nut-button>
            <nut-button class="copy" @click="copyClick">{{ t('copy_link') }}</nut-button>
          </div>
          <ImgT src="/imgs/me/close.webp" :key="'close'" @click="isShow = false" v-shrink-on-click class="close"
            alt="" />
        </div>

      </div>
    </nut-overlay>
    <Toast v-model:visible="showToast">{{ t(toast_value) }}</Toast>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
import { copyFn } from '@/utils/publicMethods'
import { useI18n } from "vue-i18n";


const { t } = useI18n();
const toast_value = ref()
const showToast = ref(false)
const props = defineProps({
  visible: {
    type: Boolean,
    default: true,
  },
  url: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['update:visible', 'close', 'updata']);
const isShow = computed({
  get: function () {
    return props.visible;
  },
  set: function (value) {
    emit('update:visible', value);
  },
});

// 复制
const copyClick = () => {
  copyFn(props.url)
  showToast.value = true
  toast_value.value = 'copy_success'
}

// 前往下载
const toSave = () => {
  let picData = document.getElementById('qrid') as HTMLImageElement; //生成二维码之后其实是个img
  if (picData) {
    let a = document.createElement('a');
    a.href = picData.src;
    a.download = `image.png`;
    a.click();
    setTimeout(() => {
      a.remove();
    }, 1000);
  }

}

</script>

<style lang='scss' scoped>
.share_main {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 14px;

  .top_img {
    width: 100%;
  }

  // background-color: #131232;
}

.share_img {
  position: relative;
  height: 280px;
  width: 100%;
  background: #131232;
  margin-top: -60px;

  .qr_code_wrap {
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 100;
    border-radius: 12px;
    transform: translateX(-50%);
    border: 1px solid #2E296B;
    padding: 11px;
  }



  .close {
    position: absolute;
    bottom: -41px;
    left: 50%;
    height: 32px;
    transform: translateX(-46%)
  }

  // width: 236px;
  // height: 159px;
  // background: url(/imgs/me/mask.webp);
  // background-size: 100% 100%;
  // background-repeat: no-repeat;

  .qr_code {
    border-radius: 12px;
    width: 170px;
    height: 170px;

  }
}

.mask_img {
  width: 236px;
  height: 159px;
  position: absolute;
  bottom: 35px;
  left: 50%;
  right: 0;
  z-index: 10;
  transform: translateX(-50%)
}

.share_bottom {
  position: absolute;
  bottom: 15px;
  display: flex;
  padding: 0 20px;
  gap: 13px;

  .save {
    width: 147px;
    height: 44px;
    background: #4B4A6E !important;
    border-radius: 8px;
  }

  .copy {
    width: 147px;
    height: 44px;
    border-radius: 8px;
  }


}

:deep(.nut-popup) {
  background: unset;
}
</style>
